<template>
<!--  :class="[ isIOS ? 'ios-height' : 'd-height' ]"-->
  <div class="video-list" :style="{'height': height}">
    <swiper class="video-list__swiper" ref="playerSwiper" :options="swiperOptions" v-if="videoList.length"
            @slideChange="_slideChange">
      <swiper-slide v-for="(item, index) in videoList" :key="item.id">
        <div class="video-list__item">
          <video-player :video-data="item" :is-current="index === activeIndex" :index="index"/>
          <div class="video-list__info" :class="[isHome ? 'bottom-70' : 'bottom-20']">
            <div class="video-list__author">@{{ item.username }}</div>
            <div class="video-list__title van-multi-ellipsis--l2">{{ item.title }}</div>
          </div>
          <div class="video-list__operating">
            <div class="video-list__avatar">
              <img :src="item.avatar" alt="">
              <div class="video-list__add" v-if="item.is_follow === 0">
                <van-icon name="plus" color="#fff" size="16"/>
              </div>
            </div>
            <div class="video-list__icon">
              <van-icon name="like" size="24" :color="item.is_like === 1 ? 'red' : ''" @click="_like(item)"/>
              <p>{{ item.like_num_str }}</p>
            </div>
            <div class="video-list__icon" @click="_comment(item)">
              <van-icon name="chat-o" size="24"/>
              <p>{{ item.comment_num_str }}</p>
            </div>
            <div class="video-list__icon">
              <van-icon class-prefix="fa fa-share" size="24"/>
              <p>{{ item.share_num_str }}</p>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <van-action-sheet v-model="commentShow" :title="`${commentItem.comment_num_str} 条评论`" style="overflow-y: inherit;">
      <div class="video-comment__content" v-if="commentShow">
        <div style="height: 100%;overflow: auto">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <template v-for="(item, index) in commentList">
                <van-cell :key="index" @click="_reply(item)" :border="false">
                  <div class="comment-list__item">
                    <div class="d-flex flex-1">
                      <img class="comment-list__avatar" :src="item.avatar" alt="">
                      <div>
                        <p class="text1-2">{{ item.nickname || item.username }}</p>
                        <p class="comment-list__content">{{ item.content }} <span
                          class="text1-2">{{ item.mtime }}</span></p>
                      </div>
                    </div>
                    <div class="d-flex flex-column align-items-center">
                      <van-icon name="like" size="16" :color="item.is_like === 0 ? '#999999' : 'red'"
                                @click="_commentLike(item, index)"/>
                      <p class="text1-2">{{ item.like_num }}</p>
                    </div>
                  </div>
                </van-cell>
<!--                回复-->
                <template v-if="item.reply_num">
                  <!--<div class="comment-reply__item" v-for="(secondItem, index) in item.reply_info" :key="secondItem.id + index">
                    <img :src="secondItem.avatar" alt="">
                    <div class="flex-1 d-flex justify-space-between">
                      <div>
                        <p class="text1-2">{{ secondItem.nickname || secondItem.username }}</p>
                        <p>回复 <span class="text1-2">{{ item.nickname || item.username }}</span>：{{ secondItem.content }} <span
                          class="text1-2">{{ secondItem.mtime }}</span></p>
                      </div>
                      <div class="text-center">
                        <van-icon name="like" size="16" :color="secondItem.is_like === 0 ? '#999999' : 'red'"/>
                        <p class="text1-2">{{ secondItem.like_num }}</p>
                      </div>
                    </div>
                  </div>-->
                  <div class="comment-list__more link-1" :key="index" @click="_toReply(item)">{{ item.reply_num }}条回复 ></div>
                </template>
              </template>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
      <div class="video-comment__foot">
        <van-form @submit="_setComment">
          <van-field v-model="commentContent" ref="commentField" :placeholder="commentPlaceholder" @blur="_commentBlur" />
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import videoPlayer from './video_player'

export default {
    name: 'player',
    data () {
        return {
            swiperOptions: {
                direction: 'vertical'
            },
            page: 1,
            videoList: [],
            activeIndex: 0,
            commentShow: false,
            commentPage: 1,
            commentList: [],
            loading: false,
            finished: false,
            refreshing: false,
            commentId: '',
            commentContent: '',
            commentItem: {},
            isHome: true,
            commentPlaceholder: '有爱评论，说点儿好听的~',
            replyItem: null,
            isIOS: 0,
            height: 0
        }
    },
    components: { videoPlayer },
    computed: {
        swiper () {
            return this.$refs.playerSwiper.$swiper
        }
    },
    created () {
        if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
            this.isIOS = 1
        }

        this.height = window.innerHeight + 'px'

        this._videoList()
        if (this.$route.path !== '/video') {
            this.isHome = true
        } else {
            this.isHome = false
        }
    },
    methods: {
        _toReply (item) {
            this.$router.push({
                name: 'commentReply',
                params: { item }
            })
        },
        _videoList () {
            this.$http.video.list({ page: this.page }).then(({ code, data }) => {
                if (code === 200) {
                    if (this.page === 1) {
                        this.videoList = data.list
                    } else {
                        this.videoList = this.videoList.concat(data.list)
                    }
                }
            })
        },
        // swiper 切换
        _slideChange () {
            this.activeIndex = this.swiper.activeIndex
            this._resetComment()
            if (this.videoList.length - 3 === this.activeIndex) {
                this.page++
                this._videoList()
            }
        },
        _resetComment () {
            this.commentList = []
            this.loading = false
            this.finished = false
            this.refreshing = false
        },
        // 视频点赞
        _like (item) {
            if (item.is_like === 0) {
                this.$http.video.like({ vid: item.id }).then(({ code }) => {
                    if (code === 200) {
                        this.videoList[this.activeIndex].is_like = 1
                        this.videoList[this.activeIndex].like_num += 1
                    }
                })
            } else {
                this.$http.video.cancelLike({ vid: item.id }).then(({ code }) => {
                    if (code === 200) {
                        this.videoList[this.activeIndex].is_like = 0
                        this.videoList[this.activeIndex].like_num -= 1
                    }
                })
            }
        },
        _comment (item) {
            this.commentItem = item
            this.commentId = item.id
            this.commentShow = true
        },
        // 获取评论
        onLoad () {
            if (this.refreshing) {
                this.commentList = []
                this.refreshing = false
            }
            this.$http.video.commentList({ page: this.commentPage, vid: this.commentItem.id }).then(({ code, data }) => {
                this.loading = false
                if (code === 200) {
                    if (data.total_page === 0 || data.total_page === data.current_page) {
                        this.finished = true
                    }
                    this.commentItem.comment_num = data.total
                    if (data.current_page === 1) {
                        this.commentList = data.list
                    } else {
                        this.commentList = this.commentList.concat(data.list)
                    }
                }
            })
        },
        onRefresh () {
            // 清空列表数据
            this.finished = false

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true
            this.onLoad()
        },
        // 评论
        _setComment () {
            if (this.replyItem) {
                this.$http.video.comment({
                    vid: this.commentId,
                    content: this.commentContent,
                    pid: this.replyItem.id
                }).then(({ code, msg }) => {
                    if (code === 200) {
                        this._commentCallback(msg)
                        this.commentPlaceholder = '有爱评论，说点儿好听的~'
                    }
                })
            } else {
                this.$http.video.comment({ vid: this.commentId, content: this.commentContent }).then(({ code, msg }) => {
                    if (code === 200) {
                        this._commentCallback(msg)
                    }
                })
            }
        },
        _commentCallback (msg) {
            this.$toast.success(msg)
            this.commentContent = ''
            this.$refs.commentField.blur()
            this.onRefresh()
        },
        // 评论点赞
        _commentLike (item, index) {
            if (item.is_like === 0) {
                this.$http.video.commentLike({ comment_id: item.id }).then(({ code }) => {
                    if (code === 200) {
                        this.commentList[index].is_like = 1
                        this.commentList[index].like_num += 1
                    }
                })
            } else {
                this.$http.video.cancelCommentLike({ comment_id: item.id }).then(({ code }) => {
                    if (code === 200) {
                        this.commentList[index].is_like = 0
                        this.commentList[index].like_num -= 1
                    }
                })
            }
        },
        // 回复
        _reply (item) {
            this.replyItem = item
            this.commentPlaceholder = `回复@${item.nickname || item.username}`
            this.$refs.commentField.focus()
        },
        _commentBlur () {
            this.replyItem = null
            this.commentPlaceholder = '有爱评论，说点儿好听的~'
        }
    }
}
</script>

<style lang="scss" scoped>
  .d-height {
    height: 100vh;
  }
  .ios-height {
    height: calc(100vh - 75px);
  }
  .video-list {
    background-color: #000000;

    .van-overlay {
      background-color: transparent;
    }

    &__swiper {
      height: 100%;
    }

    &__item {
      position: relative;
      overflow: hidden;
      height: 100%;
    }

    &__info {
      position: absolute;
      left: 20px;
      right: 20px;
      color: #ffffff;
      z-index: 999;
    }

    .bottom-70 {
      bottom: 70px;
    }

    .bottom-20 {
      bottom: 20px;
    }

    &__author {
      font-size: 18px;
      margin-bottom: 8px;
    }

    &__operating {
      position: absolute;
      right: 10px;
      bottom: 150px;
      color: #ffffff;
      text-align: center;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &__icon {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      i {
        opacity: 0.75;
        margin-bottom: 8px;
      }
    }

    &__avatar {
      margin-bottom: 32px;
      position: relative;

      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1PX solid #ffffff;
        display: block;
      }
    }

    &__add {
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -10px;
      background-color: red;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__comment {
      background-color: hsla(0, 0%, 20%, 0.97);
      overflow-y: hidden;

      .van-action-sheet__header {
        position: absolute;
        left: 0;
        right: 0;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }

  .video-comment {
    &__content {
      height: 60vh;
      padding-bottom: 40px;
    }

    &__head {
      z-index: 9;
      height: 50px;
      background-color: #21b7ff;
    }

    &__list {
      flex: 1;
      overflow-y: auto;
    }

    &__foot {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .comment-list {
    &__item {
      font-size: 12px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    &__avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }

    &__content {
      font-size: 13px;

      span {
        font-size: 12px;
      }
    }
  }

  .comment-reply__item {
    display: flex;
    line-height: 24px;
    padding: 0 16px 10px 56px;
    img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  .comment-list__more {
    padding: 5px 0 5px 56px;
  }
</style>
